import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';
import FirstStore from '../../../store/firstStore'

import person from '../../../assets/imgs/second/person.png'
import addP from '../../../assets/imgs/second/addP.png'

interface IProps {
    SerialLotNumber: number
    onSelect: (name: number) => void
}

@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }

    public handleSelect = (name: number) => {
        this.props.onSelect(name)
    }


    public render() {
        const {SerialLotNumber} = this.props
        const {location} = FirstStore
        return (
            <div className={styles.container}>
                <div className={styles.left}>
                    <p className={styles.item2}>{location}</p>
                    <p className={styles.item3}>{SerialLotNumber}</p>
                </div>
                <div className={styles.right}>
                    <img src={person} className={styles.img1} onClick={this.handleSelect.bind(this, 0)} />
                    <img src={person} className={styles.img1} onClick={this.handleSelect.bind(this, 1)} />
                    <img src={addP} className={styles.img2} />
                </div>
            </div>
        );
    }
}

export default Home;
